<template>
  <div class="cart">
    <header>
      <div class="title">
        <h3>购物车</h3>
      </div>  
    </header>
    <body>
      <!-- a1分类 -->
      <aside class="a1">
        <ul>
          <li>全部()</li>
          <li>降价()</li>
          <li>常买()</li>
          <li>分类()</li>
        </ul>
      </aside>
      <!-- a2购物车商品 -->
      <aside class="a2">
        <div class="box">
          <aside class="cartitle">
            <input type="checkbox" class="i2"><label for="">优淘自营</label>
          </aside>
          <input type="text" disabled placeholder="优惠卷"  class="i1"/>
        </div>

      <!-- 秒杀 --> 
        <p class="p1">秒杀   距离活动结束 还剩    <span>09:40:30</span></p>
        <aside class="boxbody">
          <input type="checkbox" class="i2">
          <img src="@/assets/购物车/商品1.png" alt="">
          <aside class="smallbox">
            <p>
                华为 HUAWEI P40 麒麟990 5G SoC芯片
                5000万超感知徕卡三摄 30倍数字变焦...
            </p>
            <form action="">
              <select class="guige">
                <option value="1">紫色,  128GB,  官方标配,  选服务</option>  
                <option value="2">紫色,  128GB,  官方标配,  选服务</option>  
              </select>
            </form>
            <h4>￥ 4480.00</h4>
            <div class="smallboxbottom">
              <p>预估到手价￥4400.00</p>
              <aside class="goodsnum">
                <button>-</button>
                <span>1</span>
                <button>+</button>
              </aside>
            </div>
          </aside>
        </aside>
      </aside>

      <aside class="a2">
        <div class="box">
          <aside class="cartitle">
            <input type="checkbox" class="i2"><label for="">优淘自营</label>
          </aside>
          <input type="text" disabled placeholder="优惠卷"  class="i1"/>
        </div>

      <!-- 秒杀 --> 
        <p class="p1">秒杀   距离活动结束 还剩    <span>09:40:30</span></p>
        <aside class="boxbody">
          <input type="checkbox" class="i2">
          <img src="@/assets/购物车/商品1.png" alt="">
          <aside class="smallbox">
            <p>
                华为 HUAWEI P40 麒麟990 5G SoC芯片
                5000万超感知徕卡三摄 30倍数字变焦...
            </p>
            <form action="">
              <select class="guige">
                <option value="1">紫色,  128GB,  官方标配,  选服务</option>  
                <option value="2">紫色,  128GB,  官方标配,  选服务</option>  
              </select>
            </form>
            <h4>￥ 4480.00</h4>
            <div class="smallboxbottom">
              <p>预估到手价￥4400.00</p>
              <aside class="goodsnum">
                <button>-</button>
                <span>1</span>
                <button>+</button>
              </aside>
            </div>
          </aside>
        </aside>
      </aside>

    </body>
  </div>
</template>

<script setup>

</script>

<style scoped>
.cart{
  width:100%;
  background-color: #FAFAFA;
}
.cart header{
  background-color:#E73148;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  width: 100%;
}
.cart header h3{
  color: white;
  font-weight: bolder;
  font-size: 2.5rem;
}

.a1 {
  width: 100%;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
}
.a1 ul{
  display: flex;
  justify-content: space-around;
  
}
.a1 li{
    font-size: 1.5rem;
    color: black;
    font-family: "微软雅黑";
}
/* 购物车商品 */
.a2{
  width: 100%;
  margin: 0 auto;
  background-color: white;
  padding-top: 1rem;
  margin-top: 1rem;
}
.box{
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.p1{
  width: 80%;
  margin: 0 auto;
  font-size: 0.9rem;
}
/* 优惠卷 */
.i1{
  background-color:#E62D51 ;
  color: white;
  border-radius: 9rem;
  width: 3rem;
  border: none;
}
.i1::placeholder {
color: white;
text-align: center;
font-size: 0.8rem;
}
input[type="checkbox"]{	
	appearance:none;/*取消默认的复选框样式*/
	/*重新写一个复选框圆角样式*/
	width:1rem;/*设置方形宽度为20px*/
	height:1rem;/*设置方形高度为20px*/
	border:0.1rem solid #aaaaaa;/*设置边框样式*/
	border-radius:50%;/*将方形的边框改为圆形*/
}
.cartitle{
  display: flex;
  align-items: center;
  width: 10rem;
}
.cartitle label{
  margin-left: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: "微软雅黑";
}
.boxbody{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
.p1 span{
  color: #E62D51;
  font-size: 1.5rem;
  font-weight: 600;
}
.boxbody img{
  width: 10rem;
}
.smallbox{
  width: 25rem;
  height: 12rem;
  display: flex;
  flex-direction:column;
  justify-content: space-around;
}
.smallbox select{
  border: none;
  background-color: #aaaaaa;
  border-radius: 6rem;
  color: gray;
}
.smallboxbottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goodsnum{
  width: 4rem;
  display: flex;
  justify-content: space-around;
}
.goodsnum button{
  width: 1.2rem;
  border: 0.1rem solid #aaaaaa;
  border-radius: 0.4rem;
}
.smallbox h4{
  color: #E62D51;
  font-size: 1.5rem;
}
.smallboxbottom p{
  color: #E62D51;
  font-size: 0.8rem;
}
</style>